<template>
    <div>
        <h3>乖巧听话的子组件</h3>
        <span>{{subTitle}}</span>
        <p>
            <span>Id是：{{user.userId}}</span>
            <br>
            <span>Name是：{{user.userName}}</span>
        </p>
        <p>
            <button @click="changeValue">cpdd{{value}}</button>
        </p>
    </div>
</template>
<script>

    import NextChild from './nextChild'

    export default {
        data(){
            return{
                value:10
            }
        },
        props:{
            subTitle:{
                default:'在父组件中不传？就想白嫖,报错了吧',
                required:true,
                //如果使用(v-bind/:)绑定属性接收到的是(值/变量)
                //此时如果传递的是非字符串就会报错
                //Invalid prop: type check failed for prop "subTitle". Expected String with value "123", got Number with value 123.
                type:String
            },
            name:{
                default:''
            },
            user:{
                default:function(){
                    return{
                        userId:'',
                        userName:'默认作者'
                    }
                }
            }
        },
        methods:{
            changeValue(){
                // this.value = Math.round(Math.random()*10);
                //在vue组件中可以使用$emit方法触发事件
                this.$emit('attrEvent',this.value)
            }
        },
        components:{
            NextChild
        }
    }
</script>
<style scoped>
    button{
        display: block;
        border: none;
        width: 70px;
        height: 35px;
        background-color: rgb(25, 157, 209);
        color: #fff;
        border-radius: 10px;
        box-shadow: 2px 2px rgb(102, 98, 98);
        cursor: pointer;
        margin: 0 auto;
    }
</style>